<template>
  <div>
    <el-calendar v-model="Dates">
      <template slot="dateCell" slot-scope="{ date, data }">
        <div @click="clicks(data.day)" class="calendar-item">
            <p>
              {{ data.day.substring(data.day.indexOf('-')+1) }}
            </p>
            <p style="font-size: 13px;color: rgb(64, 158, 255);">
              {{ data.day | GetCount }}
            </p>
        </div>
      </template>
    </el-calendar>

    <el-dialog ref="dialog" :title="DateInfo+' 排班计划'" :visible.sync="isDialogVisible" :close-on-click-modal="false" width="70%">
      <PlanCalendarInput :Dates="DateInfo"  v-if="isDialogVisible"/>
    </el-dialog>
  </div>
</template>

<script>
var _self;
import PlanCalendarInput from './components/PlanCalendarInput.vue';

export default {
  components: {
    PlanCalendarInput
  },
  data() {
    return {
      Dates: new Date(),
      DateInfo:'',
      TeamList:[],
      isDialogVisible: false
    };
  },
  mounted(){
    this.dataBind();
  },
  beforeCreate(){
   _self=this;
  },
  watch:{
    Dates(){
      this.dataBind();
    }
  },
  methods: {
    clicks(day) {
      //得到点击的日期
      console.log(day);
      this.DateInfo=day;
      // 显示弹窗
      this.isDialogVisible = true;
    },
    dataBind() {
          var date = new Date(this.Dates);
          //根据年月加载当前年 月份的所有班组排班数量
          var dateStr = date.getFullYear()+'-'+(date.getMonth()+1)
          // console.log(dateStr);
          this.$http.get('/api/PlanCalendar',
          {
              params: {
                  Date:dateStr
              }
          })
          .then(res => {
            console.log(res);
            this.TeamList=res.Data;
          })
      } 
  },
  //过滤器
  filters:{
    GetCount(val){
      let dates = val+' 00:00:00';
      // console.log(dates);
      // console.log(model,_self.TeamList)

      let model = _self.TeamList.find(x=>x.Date==dates);
      if(model!=undefined && model!=null){
        return '班组：'+model.Count
      }
      else{
        return ''
      }
    }
  }
};
</script>

<style scoped>
  .calendar-item{
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
  .calendar-item>p:nth-child(1){
    margin-bottom: 10px;
  }
</style>